<template>
	<view class="">

		<view class="headerBox p-t-20">
			<uv-navbar title="用户详情" :autoBack="true" bgColor="rgba(0,0,0,0)" :placeholder="true"></uv-navbar>
			<view class="swiperBoxA">
				<swiper @change="changeFn" class="swiperBox" :indicator-dots="true" :autoplay="true" :interval="3000"
					:duration="1000">
					<swiper-item class="swiper-item" v-for="(item,i) in useralbum" :key="i">
						<image :src="item.image" mode="widthFix"></image>
					</swiper-item>
				</swiper>
				<view class="swiperPor">{{num}}/{{useralbum.length}}</view>
			</view>
		</view>

		<view class="swiper-itemA ">
			<view class="swiper-item-txt">
				<view class="flex_b">
					<view class="flex">
						<view class="font-weight m-r-10 font-40">{{userdetails.nickname||'微信用户'}}</view>
						<image class="w-32 h-32 m-r-10" v-if="userdetails.level>1" src="../../static/icon/ic1.png"
							mode=""></image>
						<!-- <image class="w-32 h-32" v-if="userdetails.is_auth==1" src="../../static/icon/ic2.png" mode="">
						</image> -->
						<view class="h-32 m-r-10 shiming" v-if="userdetails.is_auth==1">已实名</view>
					</view>
					<view class="f-t" v-if="userdetails.is_line==1">在线</view>
				</view>
				<view class="grey m-t-10 flex">
					{{userdetails.gender==1?'男':'女'}}｜{{userdetails.age||0}}岁｜{{userdetails.height||0}}｜{{userdetails.constellation||'未设置星座'}}
				</view>
				<view class="flex m-t-10">
					<view class="flex m-r-30 iconBox" v-if="userdetails.career_name">
						<text class="m-r-10 icon-gongwenbao iconfont"></text>
						<text>{{userdetails.career_name}}</text>
					</view>
					<view class="flex iconBox" v-if="userdetails.city">
						<text class="icon-shouhuodizhi iconfont m-r-10"></text>
						<text>{{userdetails.city}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="signBox" v-if="userdetails.bio">
			<view class="font-24 grey m-b-10">个性签名</view>
			<view class="">{{userdetails.bio||''}}</view>
		</view>
		<uv-tabs :list="list" @click="click" :scrollable="false" :inactiveStyle="{color: '#B2B2B2',fontWeight:'600'}"
			lineColor="#EC6930" :activeStyle="{color: '#ff5e0f',fontWeight:'600' }"></uv-tabs>
		<view class="" style="padding: 30rpx;" v-if="index==0">
			<view class="flex_b m-b-40">
				<view class="">出生日期</view>
				<view class="grey" v-if="userdetails.birthday">{{userdetails.birthday}}</view>
				<view class="grey" v-else>未设置</view>
			</view>
			<view class="flex_b m-b-40">
				<view class="">兴趣爱好</view>
				<view class="grey" v-if="userdetails.height">{{userdetails.height}}</view>
				<view class="grey" v-else>未设置</view>
			</view>
			<view class="flex_b m-b-40">
				<view class="">职业</view>
				<view class="grey" v-if="userdetails.weight">{{userdetails.weight}}</view>
				<view class="grey" v-else>未设置</view>
			</view>
			<view class="flex_b m-b-40">
				<view class="">背景经历</view>
				<view class="grey">{{userdetails.marriage||'未知'}}</view>
			</view>
			<view class="flex_b m-b-40">
				<view class="">性格</view>
				<view class="grey">{{userdetails.income||'暂不透露'}}</view>
			</view>
			<view class="flex_b m-b-40">
				<view class="">住址</view>
				<view class="grey">{{userdetails.house||'暂不透露'}}</view>
			</view>
			<view class="flex_b m-b-40">
				<view class="">介绍</view>
				<view class="grey">{{userdetails.car||'暂不透露'}}</view>
			</view>	
		</view>
		<view class="imagesModel flex_b" v-else-if="index==2">
			<block v-for="(item,i) in useralbum">
				<image :src="item.image" mode="widthFix" @click="lookImg(item.image)"></image>
			</block>
			<block v-for="(item,i) in imgNum">
				<image src="" mode=""></image>
			</block>
		</view>
		<view class="" style="padding: 30rpx;" v-else-if="index==1">
			<view class="flex_b m-b-40">
				<view class="">年龄要求</view>
				<view class="grey" v-if="userdetails.ageask">{{userdetails.ageask}}岁</view>
				<view class="grey" v-else>未设置</view>
			</view>
			<view class="flex_b m-b-40">
				<view class="">兴趣要求</view>
				<view class="grey" v-if="userdetails.heighask">{{userdetails.heighask}}</view>
				<view class="grey" v-else>未设置</view>
			</view>
			<view class="flex_b m-b-40">
				<view class="">职业要求</view>
				<view class="grey" v-if="userdetails.educationask">{{userdetails.educationask}}</view>
				<view class="grey" v-else>未设置</view>
			</view>
			<view class="flex_b m-b-40">
				<view class="">性格要求</view>
				<view class="grey">{{userdetails.incomeask||'未设置'}}</view>
			</view>
		</view>
		<view class="bottom-mar" style="height: 100rpx;"></view>
		<view class="bomPosition flex">
			<button type="default" v-if="userdetails.is_love==1" class="flex_center" @click="likeFn('删除')">
				<text class="iconfont icon-guanbishixin m-r-10"></text>取消关注</button>

			<button type="default" v-else class="flex_center" @click="likeFn('添加')">
				<text class="iconfont icon-xihuan m-r-10"></text>关注</button>


			<button type="default" @click="handleSwitchConversation" class="flex_center"
				style="background: #ffbd00 !important;"><text class="iconfont icon-xiaoxi m-r-10"></text>打招呼</button>
		</view>
		<!-- 是否开通会员 -->
		<noneVip ref="popup" id="myChild"></noneVip>

		<uv-toast ref="uToast"></uv-toast>
	</view>
</template>
<script>
	import TencentCloudChat from '@tencentcloud/chat';
	// #ifdef MP-WEIXIN
	import "@/TUIKit/components/TUIConversation/subPackage-init.ts";
	// #endif
	import TUIChatEngine, {
		TUIConversationService,
		TUIStore,
		StoreName,
	} from "@tencentcloud/chat-uikit-engine";
	export default {
		data() {
			return {
				token:'',
				userInfo: '',
				num: 1,
				index: 0,
				useralbum: [],
				userdetails: {},
				list: [{
						name: '个人资料',
					},
					{
						name: '搭子要求',
					},
					{
						name: '个人相册',
					}
				]
			};
		},


		computed: {
			imgNum() {
				return 3 - (5 % 3)
			}
		},
		onLoad(res) {
			this.lookYou(res.id)
			this.getUserdetails(res.id)
			this.useralbumFn(res.id)
			
		},
		onShow() {
			
			uni.getStorage({
				key: 'token',
				success: res => {
					this.token = res.data
				},
				fail:err=> {
					this.token = ''
				}
			})
			this.getUserSig()
			this.getUserInfo()
			// TUIStore.watch(StoreName.CONV, {
			// 	conversationList: (list) => {
			// 		console.log(list,'aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa');
			// 		// conversationList.value = list;
			// 	},
			// });
			if (this.userdetails.id) {
				this.getUserdetails(this.userdetails.id)
			}
		},
		
		methods: {
			showLogin() {
				if(!this.token) {
					uni.showModal({
						title: '未登录',
						content: '请前往登录',
						success: res=> {
							if (res.confirm) {
								this.$util.redirectTo('/pages/login/login')
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
					return
				}
			},
			lookYou(id) {
				this.$api.sendRequest({
					url: '/api/Friends/look',
					data: {
						user_id: id
					}
				})
			},
			// 获取用户信息
			getUserInfo() {
				this.$api.sendRequest({
					url: '/api/user/userInfo',
					success: res => {
						this.userInfo = res.data
						uni.setStorageSync('userId', res.data.mobile);
					}
				})
			},
			getUserSig() {
				this.$api.sendRequest({
					url: '/api/Tencent/genUserSig',
					success: res => {
						console.log(res);
						this.UserSig = res.data.UserSig
					}
				})
			},
			// 关注
			pairInfo(id) {
				this.$api.sendRequest({
					url: '/api/Friends/pairInfo',
					data: {
						user_id: id
					},
					success: res => {
						if (res.code == 1) {
							this.loveFnA()
						} else {
							this.getUserdetails(this.userdetails.id)
						}

					}
				})
			},
			likeFn(type, id) {
				if(this.token) {
					let that = this
					let options = {
						SDKAppID: this.$config.sdkappid // 接入时需要将0替换为您的即时通信应用的 SDKAppID
					};
					let chat = TencentCloudChat.create(options); // SDK 实例通常用 chat 表示
					
					console.log(this.userdetails);
					this.$api.sendRequest({
						url: '/api/Friends/love',
						data: {
							type: type,
							user_id: this.userdetails.id
						},
						success: res => {
							if (res.code == 1 && type == '添加') {
								this.pairInfo(this.userdetails.id)
							} else if (res.code == 1 && type == '删除') {
								let promise = chat.deleteFriend({
									userIDList: [that.userdetails.mobile],
								 type: TencentCloudChat.TYPES.SNS_DELETE_TYPE_BOTH
								});
								promise.then(function(imResponse) {
									that.getUserdetails(that.userdetails.id)
									that.$refs.uToast.show({
										type: 'default',
										message: res.msg,
										duration: 1500
									}) 
									
									const {
										successUserIDList,
										failureUserIDList
									} = imResponse.data;
									// 删除成功的 userIDList
									successUserIDList.forEach((item) => {
										const {
											userID
										} = item;
									});
									// 删除失败的 userIDList
									failureUserIDList.forEach((item) => {
										const {
											userID,
											code,
											message
										} = item;
									});
									// 如果好友列表有变化，则 SDK 会触发 TencentCloudChat.EVENT.FRIEND_LIST_UPDATED 事件
								}).catch(function(imError) {
									console.warn('removeFromFriendList error:', imError);
								});
							} else {
								this.getUserdetails(this.userdetails.id)
								this.$refs.uToast.show({
									type: 'default',
									message: res.msg,
									duration: 1500
								})
							}
					
						}
					})
				}else {
					this.showLogin()
				}
				
			},
			// 关注
			loveFnA() {
				let obj = {
					name: this.userdetails.nickname,
					avatar: this.userdetails.avatar,
					id: this.userdetails.id,
					level: this.userdetails.level,
					is_auth: this.userdetails.is_auth
				}
				let a = JSON.stringify(obj)
				uni.request({
					url: `https://console.tim.qq.com/v4/sns/friend_add?sdkappid=${this.$config.sdkappid}&identifier=${this.$config.identifier}&usersig=${this.UserSig}&random=${this.userdetails.mobile}&contenttype=json`,
					header: {
						'content-type': 'application/json',
					},
					method: 'POST',
					data: {
						"From_Account": this.userInfo.mobile,
						"ForceAddFlags": 1,
						"AddFriendItem": [{
							"To_Account": this.userdetails.mobile,
							"AddSource": "AddSource_Type_admin",
							"AddWording": a,
						}]
					},
					success: res => {
						this.getUserdetails(this.userdetails.id)
						console.log(res, 'res++++++++');
						let code = res.data.ResultItem[0].ResultCode
						if (res.data.ErrorCode == 0 && code == 0) {
							// 成功
							this.$util.redirectTo('/otherpages/matchSuccess/matchSuccess', {
								id: this.userdetails.id
							})
						} else if (res.data.ErrorCode == 30014 || code == 30014) {
							this.$refs.uToast.show({
								type: 'default',
								message: '对方好友列表已满',
								duration: 1500
							})
						} else if (res.data.ErrorCode == 30015 || code == 30015) {
							this.$refs.uToast.show({
								type: 'default',
								message: '对方已经是您的好友了',
								duration: 1500
							})
						} else if (res.data.ErrorCode == 30515 || code == 30515) {
							this.$refs.uToast.show({
								type: 'default',
								message: '您已将对方拉黑',
								duration: 1500
							})
						} else if (res.data.ErrorCode == 30525 || code == 30525) {
							this.$refs.uToast.show({
								type: 'default',
								message: '对方已将您拉黑',
								duration: 1500
							})
						} else if (res.data.ErrorCode == 30540 || code == 30540) {
							this.$refs.uToast.show({
								type: 'default',
								message: '请勿频繁加好友',
								duration: 1500
							})
						}
					},
					fail: err => {
						console.log(err, 'err');
					}
				})
			},
			// 查看图片
			lookImg(item) {
				// 网络
				uni.getImageInfo({
					src: `${this.$util.img(item)}`,
					success: function(image) {
						uni.previewImage({
							urls: [image.path],
							longPressActions: {
								itemList: ['发送给朋友', '保存图片', '收藏'],
								success: function(data) {
									console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data
										.index + 1) + '张图片');
								},
								fail: function(err) {
									console.log(err.errMsg);
								}
							}
						})
					}
				})
			},
			// 他的相册
			useralbumFn(id) {
				this.$api.sendRequest({
					url: '/api/Friends/useralbum',
					data: {
						id: id
					},
					success: res => {
						this.useralbum = res.data
					}
				})
			},
			getUserdetails(id) {
				// 获取别人的详情
				this.$api.sendRequest({
					url: '/api/Friends/userdetails',
					data: {
						user_id: id
					},
					success: res => {
						this.userdetails = res.data
					}
				})
			},
			handleSwitchConversation() {
				if(this.token) {
				if (this.userInfo.level > 1) {
					let id = 'C2C' + this.userdetails.mobile
					uni.$emit("handleSwitchConversation", id);
					TUIConversationService.switchConversation(id);
					this.$util.redirectTo('/TUIKit/components/TUIChat/index', {
						handleSwitchConversation: id
					})
				} else {
					const childComponent = this.selectComponent('#myChild');
					childComponent.$vm.openFn();
				}
				}else {
					this.showLogin()
				}

			},
			greetFn(item) {
				let id = 'C2C' + this.userdetails.mobile
				this.handleSwitchConversation(id)
				// // uni.$emit("handleSwitchConversation", id);
				// console.log(id,'[[[[[[[[]]]]]]]]');
				// this.$util.redirectTo('/TUIKit/components/TUIChat/index', {
				// 	handleSwitchConversation:id
				// })
				// emits("handleSwitchConversation", id);
				// this.$refs.popup.open('center');
			},
			click(e) {
				console.log(e, '+++---');
				this.index = e.index
			},
			changeFn(e) {
				this.num = e.detail.current + 1
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #fff;
		// height: 2000rpx !important;
		overflow: auto !important;
	}

	.imagesModel {
		padding: 30rpx;
		flex-wrap: wrap;

		image {
			width: 216rpx;
			height: 240rpx;
			border-radius: 16rpx;
			margin-bottom: 20rpx;
		}
	}

	.signBox {
		width: 644rpx;
		background: #F7F7F7;
		border-radius: 10rpx;
		margin: 0 auto;
		padding: 25rpx;
	}

	.headerBox {
		// background-image: linear-gradient(to left, #ffe5da, #e6f5fe,);
		background-image: linear-gradient(to top, #fff, #ffe5da, #e6f5fe);
		// height: 720rpx;
	}

	.swiperBoxA {
		position: relative;
		width: 694rpx;
		height: 694rpx;
		margin: 0 auto;
		border-radius: 20rpx;

		.swiperPor {
			width: 84rpx;
			height: 40rpx;
			background-color: #fff;
			position: absolute;
			bottom: 25rpx;
			right: 25rpx;
			z-index: 99;
			text-align: center;
			border-radius: 10rpx;
		}
	}

	.swiperBox {
		width: 694rpx;
		height: 694rpx;
		margin: 0 auto;
		border-radius: 20rpx;

		.swiper-item {
			width: 694rpx;
			height: 694rpx;

			image {
				width: 694rpx;
				height: 694rpx;
				border-radius: 20rpx;
			}
		}
	}

	.swiper-itemA {
		width: 100%;
		display: block;
		height: 100%;
		transform: scale(0.96);
		transition: all 0.2s ease-in 0s;
		overflow: hidden;
		border-radius: 20rpx;
		text-align: center;
		background: #fff;
	}

	.swiper-itemA-image {
		height: 480rpx !important;
		width: 750rpx !important;
		margin: 0 auto;

	}

	.swiper-item-txt {
		width: 700rpx;
		background-color: #fff;
		padding: 25rpx;
	}
</style>
